<template>
 <el-scrollbar style="height:100%" class="opration-container">
  <div class="opration">
    <div class="oprationLeft">
      <el-button @click.native="addClick" size="small" type="primary" v-has="'NEWS_COMPONENT_SAVE'">新建</el-button>
    </div>
    <div class="oprationRight">
      <el-form :inline="true" size="small" :model="searchForm">
        <el-form-item>
          <el-select v-model="searchForm.queryType" :placeholder="$t('组件名称')" clearable style="width:100px;">
            <el-option
              v-for="(item, index) in searchItemData"
              :key="index"
              :label="$t(item.name)"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            :placeholder="$t('请输入关键词搜索')"
            v-model="searchForm.name"
            clearable
            style="width:160px;"
          >
            <template slot="prepend">
              <i class="iconfont icon-sousuo" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <bs-search-button-icon @click.native="searchClick"></bs-search-button-icon>
        </el-form-item>
      </el-form>
    </div>
  </div>
</el-scrollbar>
</template>
<script>
export default {
  name: 'AssemblyCondition',
  data() {
    return {
      searchForm: {
        queryType: '1',
        name: '',
      },
      searchItemData: [
        { name: '组件名称', value: '1' },
      ],
    }
  },
  components: {},
   mounted(){
  },
  methods: {
    addClick() {
      this.$emit('add')
    },
    deleteClick() {
      this.$emit('del')
    },
    editClick() {
      this.$emit('edit')
    },
    searchClick() {
      this.$emit('search', this.searchForm)
    },
  }
}
</script>
<style lang="scss" scoped>
.oprationLeft {
  flex-shrink: 0;
}
</style>
